<template>
  <div class="pagination">
    <button
      @click="myCurrentPage--"
      :disabled="myCurrentPage <= 1"
      :class="{ disabled: myCurrentPage <= 1 }"
    >
      <span>&lt;</span>
    </button>
    <button
      :class="{
        active: myCurrentPage === 1,
      }"
      @click="myCurrentPage = 1"
    >
      1
    </button>
    <button v-show="startEnd.start > 2">
      <span>...</span>
    </button>
    <button
      v-for="(item, index) in startEnd.end - startEnd.start + 1"
      :key="item"
      :class="{ active: myCurrentPage === index + startEnd.start }"
      @click="myCurrentPage = index + startEnd.start"
    >
      {{ index + startEnd.start }}
    </button>

    <button v-show="startEnd.end < totalPages - 1">
      <span>...</span>
    </button>
    <button
      :class="{
        active: myCurrentPage === totalPages,
      }"
      @click="myCurrentPage = totalPages"
      v-show="totalPages > 1"
    >
      {{ totalPages }}
    </button>
    <button
      @click="myCurrentPage++"
      :disabled="myCurrentPage >= totalPages"
      :class="{ disabled: myCurrentPage >= totalPages }" 
    >
      <span>&gt;</span>
    </button>
    <select v-model="myPageSize">
      <option v-for="size in pageSizes" :key="size" :value="size">
        每页{{ size }}条
      </option>
    </select>
    <span class="total">总数:{{ total }}条</span>
  </div>
</template>
<script>
import _ from "lodash"
export default {
  name: "Pagination",
  data() {
    return {
      myCurrentPage: this.currentPage,
      myPageSize: this.pageSize,
      isPageSizeChange: false,
    };
  },
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageSizes: {
      type: Array,
      default: () => [5, 10, 15, 20],
    },
    total: {
      type: Number,
      default: 178,
    },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    startEnd() {
      const { myCurrentPage, totalPages } = this;
      if (totalPages <= 2) {
        return {
          start: 0,
          end: -1,
        };
      }

      if (totalPages <= 7) {
        return {
          start: 2,
          end: totalPages - 1,
        };
      }
      let start = myCurrentPage - 2;
      if (start < 2) start = 2;
      let end = start + 4;
      if (end > totalPages - 1) {
        end = totalPages - 1;
        start = end - 4;
      }
      return {
        start,
        end,
      };
    },
  },
  watch:{
    myCurrentPage: {
      handler:_. debounce(
        function (myCurrentPage) {
          if (this.isPageSizeChange) {
            this.isPageSizeChange = false;
            return;
          }
          this.$emit("current-change", myCurrentPage);
        },
        300,
        {
          // 一上来触发一次
          leading: true,
          // 最大等待时间
          maxWait: 5000,
        }
      ),
    },
    myPageSize(myPageSize) {
      if (this.myCurrentPage > this.totalPages) {
        this.isPageSizeChange = true;
        this.myCurrentPage = this.totalPages;
        this.$emit("update:currentPage", this.totalPages);
      }
      this.$emit("size-change", myPageSize);
    },
  }
};
</script>
<style lang="less" scoped>
.pagination {
  display: flex;
  align-items: center;
  button {
    width: 28px;
    height: 28px;
    border: none;
    outline: none;
    background-color: #f4f4f5;
    color: #606266;
    border-radius: 2px;
    margin: 0 5px;
    &.active {
      background-color: #409eff;
      color: #fff;
    }
     &.disabled {
      cursor: not-allowed;
      color: #c0c4cc;
    }
  }
  select {
    margin: 0 10px;
    height: 28px;
    outline: none;
  }
}
.total {
  font-size: 16px;
}
</style>